<script setup>
  import VisualLayout from '@/components/VisualLayout.vue';
  import BarChartCount from '@/components/BarChartCount.vue';
  import PieQuality from '@/components/PieQuality.vue';
  import TableTally from '@/components/TableTally.vue';
  const PieHuanParams = ref([
    {
      statusName: '引线切断',
      statusText: '已完成',
      value: 80,
      color: 0,
    },
    {
      statusName: '引线焊接',
      statusText: '结束',
      value: 30,
      color: 1,
    },
  ]);
  setTimeout(() => {
    PieHuanParams.value[0] = {
      statusName: '工厂稼动',
      statusText: '结束',
      value: 30,
      color: 1,
    };
  }, 2000);
</script>
<template>
  <VisualLayout>
    <div class="grid-container">
      <div class="column1">
        <TableTally></TableTally>
        <PieQuality></PieQuality>
      </div>
      <div class="column2">
        <div class="earth-box">
          <img style="width: 100%" src="../assets/image/quality/earth.png" alt="" />
        </div>
      </div>
      <div class="column3">
        <BarChartStack></BarChartStack>
        <BarLineChart2></BarLineChart2>
      </div>
    </div>
  </VisualLayout>
</template>

<style lang="less" scoped>
  .grid-container {
    height: 100%;
    display: flex;
    padding: 30px;
    padding-top: 0px;

    /* 行间距 */
    .column1,
    .column3 {
      display: flex;
      flex-direction: column;
      width: 30%;
      grid-row: span 2;
    }

    .column2 {
      width: 40%;
      grid-row: span 2;
      padding: 0px 20px;
      display: flex;
      flex-direction: column;

      .earth-box {
        position: relative;
        text-align: center;
        padding-bottom: 20px;
        flex: 1;
        min-height: 300px;

        .status-box {
          position: relative;
          height: 100%;
          justify-content: space-around;
          background: url(../assets/image/device/earth-bg.png) bottom center no-repeat;
          background-size: 100% auto;
          text-align: center;

          .status-item {
            width: 118px;
            color: white;
            font-weight: bold;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &:nth-child(1) {
              bottom: 23%;
              left: 50%;
              margin-left: -50px;

              .percent {
                background: linear-gradient(0deg, #00d7fe 0.4%, #f7fafd 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            &:nth-child(2) {
              right: 16%;
              bottom: -48px;

              .percent {
                background: linear-gradient(0deg, #edc777 0.4%, #f7fafd 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            &:nth-child(3) {
              left: 12%;
              bottom: -48px;

              .percent {
                background: linear-gradient(0deg, #4385d6 0.4%, #f7fafd 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .icon-box {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 147px;
              height: 147px;
              background: url(../assets/image/device/icon-bg.png) center 0px no-repeat;
              background-size: 100% 100%;
            }

            .percent {
              font-size: 28px;
              font-weight: bold;
            }

            .pname {
              font-size: 19px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

  .data-list {
    display: flex;
    justify-content: space-between;
    padding: 50px 30px;

    .data-item {
      width: 30%;
      min-width: 29%;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #a1c8fa;
      background: url(../assets/image/device/status-bg.png) 0px 0px no-repeat;
      background-size: 100% 100%;
      font-size: 24px;
      color: white;
      box-sizing: border-box;
      padding-bottom: 4px;
    }
  }

  .status-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
  }

  @media (min-width: 1024px) {
  }
</style>
